import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import Footer from "../components/Footer";
import Header from "../components/Header";
import { userLogin } from "../service";

export default function Login() {
  /* ------------------------------------------------------- */

  // 状态变量 => 登录用户名
  let [uname, setUname] = useState("yaya");
  // 状态变量 => 登录密码
  let [upwd, setUpwd] = useState(123456);
  // 在最外层
  let nav = useNavigate();

  /* ------------------------------------------------------- */

  // 执行登录操作
  let doLogin = async () => {
    // console.log("当前用户输入的内容:", uname, upwd);
    // 将用户输入提交个服务器端接口,进行登录验证
    let data = await userLogin(uname, upwd);
    console.log(data);
    if (data.code == 1) {
      // 登录成功
      // 1.显示欢迎消息
      alert("欢迎回来:" + uname);
      // 2.在客户端保存服务器返回的身份令牌,以及当前登录的用户名
      localStorage["userToken"] = data.token;
      // 3.页面跳转 "登录原因页"
      let url = localStorage["loginReason"];
      delete localStorage["loginReason"]; //即将跳转回登录原因页,客户端无需在保存

      nav(url); // 导航跳转
    } else {
      // 登录失败
      alert("登录失败! 错误原因为:" + data.msg);
    }
  };

  /* ------------------------------------------------------- */

  return (
    <>
      {/* F1:页头 */}
      <Header></Header>

      {/* F3:主体 */}
      <div className="login_box">
        <div className="container">
          <div className="login">
            <h2>用户登录</h2>
            {/* ------------------1-------------------------- */}
            <dl className="clearfloat">
              <dt>
                <span className="tips" id="uname_prompt_text"></span>用户名：
              </dt>
              <dd>
                <input
                  value={uname}
                  onChange={(e) => setUname(e.target.value)}
                  type="text"
                  id="uname"
                  placeholder="用户名/手机号"
                />
                <em className="icon_user"></em>
                <i className="icon_error" id="uname_prompt_icon"></i>
              </dd>
            </dl>
            {/* -------------------------------------------- */}

            {/* --------------------2------------------------ */}
            <dl>
              <dt>
                <span className="tips" id="pwd_prompt_text">
                  请输入密码
                </span>
                密码：
              </dt>
              <dd>
                <input
                  type="password"
                  id="pwd"
                  placeholder="密码"
                  value={upwd}
                  onChange={(e) => setUpwd(e.target.value)}
                />
                <em className="icon_pwd"></em>
                <i className="icon_error" id="pwd_prompt_icon"></i>
              </dd>
            </dl>
            {/* -------------------------------------------- */}

            {/* ----------------------3---------------------- */}
            <p>
              <label>
                <input type="checkbox" />
                <span>自动登录</span>
              </label>
            </p>
            {/* -------------------------------------------- */}

            {/* ----------------------4---------------------- */}
            <button type="button" id="login" onClick={doLogin}>
              立 即 登 录
            </button>
            {/* -------------------------------------------- */}
          </div>
        </div>
      </div>

      {/* F4:页脚 */}
      <Footer></Footer>
    </>
  );
}
